<div class="pad-def bg-default bor-b-def">
  <h2 class="no-margin">用户管理</h2>
</div>

<div class="wrapper-md bg-white">
  <form class="form-horizontal over-hide clearfix pad-def  bor-def mar-b-def">

    <div class="clearfix">
      <div class="form-group col-lg-4 col-sm-6 col-xs-12">
        <label class="control-label col-xs-12 col-sm-3">用户名：</label>
        <p class="col-xs-12 col-sm-9 ">
          <input class="form-control" [(ngModel)]="searchParams.username" name="username" placeholder="用户名/学号"/>
        </p>
      </div>
      <div class="form-group col-lg-4 col-sm-6 col-xs-12">
        <label class="control-label col-xs-12 col-sm-3">类型：</label>
        <p class="col-xs-12 col-sm-9 ">
          <select class="form-control" [(ngModel)]="searchParams.userType" name="userType">
            <option value="{{userType.userType}}" *ngFor="let userType of userTypeOptions">{{userType.userTypeDescription}}</option>
          </select>
        </p>
      </div>
    </div>
    <div class="clearfix">
      <div class="form-group col-lg-4 col-sm-6 col-xs-12">
        <label class="control-label col-xs-12 col-sm-3">姓名：</label>
        <p class="col-xs-12 col-sm-9 ">
          <input class="form-control" [(ngModel)]="searchParams.name" name="name" placeholder="姓名"/>
        </p>
      </div>
      <div class="form-group col-lg-4 col-sm-6 col-xs-12">
        <p class="col-xs-12 col-lg-9 col-sm-offset-3">
          <button class="btn btn-primary" (click)="search()">搜索</button>
          <button class="btn btn-default" (click)="resetParams()">重置</button>
        </p>
      </div>
    </div>
  </form>

  <p-dataTable #dt [value]="tableData"  scrollHeight="200px" emptyMessage="暂无数据" >
    <p-header>
      <div class="ui-helper-clearfix text-left">
        <a class="btn btn-sm btn-info pull-left" (click)="showAddModal()"><i class="fa fa-plus-square"></i>新增用户</a>
        <a class="btn btn-sm btn-info pull-right" (click)="dt.exportCSV()" ><i class="fa fa-file-o"></i>导出CSV</a>
      </div>
    </p-header>
    <p-column field="userId" header="id"></p-column>
    <p-column field="username" header="用户名/学号"></p-column>
    <p-column field="userTypeDescription" header="用户类型"></p-column>
    <p-column field="name" header="姓名"></p-column>
    <p-column styleClass="col-button text-center">
      <ng-template pTemplate="header">
        操作
      </ng-template>
      <ng-template  let-info="rowData" pTemplate="body">
        <div class="btn-group" style="min-width: 200px">
          <button type="button" class="btn btn-xs btn-primary " (click)="showEditModal(info)">编辑</button>
          <button type="button" class="btn btn-xs btn-danger " (click)="remove(info.userId)">删除</button>
        </div>
      </ng-template>
    </p-column>
    <p-footer>
      <paginator *ngIf="page.count" [(index)]="page.pageIndex" [(pageSize)]="page.pageSize" [count]="page.count" size="sm" (onChangePage)="query()"></paginator>
    </p-footer>
  </p-dataTable>
</div>
<modal [(visible)]="modalAdd.visible">
  <modal-header>添加用户</modal-header>
  <modal-body>
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-3 control-label">用户名：</label>
        <div class="col-sm-9">
          <input class="form-control" placeholder="用户名（学号）" [(ngModel)]="modalAdd.data.username" name="username" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">用户类型：</label>
        <div class="col-sm-9">
          <select class="form-control" [(ngModel)]="modalAdd.data.userType" name="userType">
            <option *ngFor="let userType of modalAdd.userTypeOptions" value="{{userType.userType}}">{{userType.userTypeDescription}}</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">密码：</label>
        <div class="col-sm-9">
          <input class="form-control" placeholder="密码" [(ngModel)]="modalAdd.data.password" name="password" />
        </div>
      </div>
    </form>
  </modal-body>
  <modal-footer>
    <button class="btn btn-primary" [disabled]="modalAdd.submitted" (click)="add()">{{modalAdd.submitted?'正在提交...':'提交'}}</button>
    <button class="btn btn-default" (click)="closeAddModal()">取消</button>
  </modal-footer>
</modal>
<modal [(visible)]="modalEdit.visible">
  <modal-header>修改用户</modal-header>
  <modal-body>
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-3 control-label">用户名：</label>
        <div class="col-sm-9">
          <input class="form-control" placeholder="用户名（学号）" [(ngModel)]="modalEdit.data.username" name="username" [disabled]="true" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">用户类型：</label>
        <div class="col-sm-9">
          <select class="form-control" [(ngModel)]="modalEdit.data.userType" name="userType">
            <option *ngFor="let userType of modalEdit.userTypeOptions" value="{{userType.userType}}">{{userType.userTypeDescription}}</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">密码：</label>
        <div class="col-sm-9">
          <input class="form-control" placeholder="密码" [(ngModel)]="modalEdit.data.password" name="password" />
        </div>
      </div>
    </form>
  </modal-body>
  <modal-footer>
    <button class="btn btn-primary" [disabled]="modalEdit.submitted" (click)="update()">{{modalEdit.submitted?'正在提交...':'提交'}}</button>
    <button class="btn btn-default" (click)="closeEditModal()">取消</button>
  </modal-footer>
</modal>
